<template>
  <d2-container type="card">
    <el-row>
      <el-col :span="14">
        <h3>{{banner}}</h3>
      </el-col>
    </el-row>
    <br>
    <el-row :gutter="20">
      <el-col :span="12">
        <d2-ueditor v-model="text"/>
      </el-col>
      <el-col :span="12">
        <el-card v-if="text" shadow="never" style="border: 1px solid #d4d4d4;">
          <template slot="header">预览</template>
          <div v-html="text" style="margin: 0px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <template slot="footer">
       <el-button type="primary" @click="getContent">确 定</el-button>
       <el-button @click="handleClose">取 消</el-button>
    </template>
  </d2-container>
</template>

<script>
import {mapActions, mapState} from 'vuex'
import {findContent, saveContent} from "@api/ueditor/ueditor";
export default {
  data () {
    return {
      banner:'活动须知',
      text: '<p>请输入内容</p>',
       editData: '',
        tableData: {
            id: '',
            subscribeId: '',
            type: '',
        },
    }
  },
  methods: {
            //获取文档内容
            getContent: function () {
                let content = this.text;
                if(content == ''){
                    this.$message({
                        message: "不可保存空白文本",
                        type: "error",
                    });
                    return false;
                }
                
                saveContent({
                    id: this.tableData.id,
                    subscribeId: this.tableData.subscribeId,
                    type: this.tableData.type,
                    content: content,
                }).then((res) => {
                    this.$message({
                        message: "保存成功",
                        type: "success",
                    });
                    this.loading = false;
                    this.cancel();
                }).catch((err) => {
                    console.log("err", err);
                    this.loading = false;
                });
            },
            handleClose(done) {
                this.$confirm('确定关闭吗').then(() => {
                    // function(done)，done 用于关闭 Dialog
                    this.cancel();
                    done();
                }).catch(() => {
                    // console.log("点击确定时触发");
                })
            },
            cancel() {
                this.tableData={
                    id: '',
                    subscribeId: '',
                    type: '',
                };
                let tagName = this.current;
                this.close({tagName});
            },
            ...mapActions('d2admin/page', [
                'close'
            ]),
            fetchData() {
                if (this.tableData.subscribeId == undefined || this.tableData.type == undefined) {
                    this.cancel();
                    return false;
                }
                findContent({
                    subscribeId: this.tableData.subscribeId,
                    type: this.tableData.type,
                }).then(res => {
                    if (res.data != undefined) {
                        this.editData = this.tableData.type == 1 ? res.data.noticeContext : res.data.detailContext;
                        this.tableData.id = res.data.id;
                        this.banner=this.tableData.type == 1 ? '活动须知': '活动明细'
                        this.text=this.editData;

                    }
                    this.loading = false
                }).catch(err => {
                    console.log('err', err);
                    this.loading = false
                })
            },
        },
        created() {
            this.tableData.subscribeId = this.$route.params.subscribeId;
            this.tableData.type = this.$route.params.type;
            this.tableData.id = this.$route.params.id;
            this.fetchData();
        },
        computed: {
            ...mapState('d2admin/page', [
                'opened',
                'current' //用户获取当前页面的地址，用于关闭
            ]),
        },
}
</script>